import React, { useEffect, useState } from "react";
import { Menu, Button, Input } from "antd";
import http from "../request";

const { SubMenu } = Menu;

const MenuList = (props) => {
    const [menu, setMenu] = useState([])
    const [anthsource, setAuthSource] = useState([])
    const [show, setShow] = useState(!1)
    const [inputdata, setInputdata] = useState('')

    useEffect(() => {
        menuGet()
        authGet()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <div className="u-flex-col u-row-between" style={{height:610, backgroundColor:'#006646'}}>
            {show ? (<Menu theme="dark" mode="inline" selectedKeys={props.menuKeys} style={{ width: 200, minWidth: 150, overflowY: 'auto', position: 'relative' }}>
                {
                    menu.map(menu1 => {
                        if (menu1?.child && menu1.child.length > 0) {
                            return (
                                <SubMenu key={'staff_all-' + menu1.id} title={menu1.name} style={{width:200}}>
                                    {
                                        menu1.child.map(menu2 => {
                                            return <Menu.Item key={'staff-' + menu2.id} onClick={() => menuChange(menu2.name, menu2.id)}>{menu2.name}</Menu.Item>
                                        })
                                    }
                                </SubMenu>
                            )
                        } else {
                            return <Menu.Item key={menu1.id} onClick={() => menuChange(menu1.name, menu1.id)}>{menu1.name}</Menu.Item>
                        }
                    })
                }
            </Menu>) : (<Menu theme="dark" mode="inline" selectedKeys={props.menuKeys} style={{ width: 200, minWidth: 150, overflowY: 'auto', position: 'relative' }}>
                {
                    anthsource.map(menu1 => {
                        if ((menu1?.child ?? '') && (menu1.child.length > 0)) {
                            return (
                                <SubMenu key={'store_all-' + menu1.id} title={menu1.name} style={{width:200}}>
                                    {
                                        menu1.child.map(menu2 => {
                                            return <Menu.Item key={'store-' + menu2.id} onClick={() => menuChange(menu2.name, menu2.id)}>{menu2.name}</Menu.Item>
                                        })
                                    }
                                </SubMenu>
                            )
                        } else {
                            return <Menu.Item key={menu1.id} onClick={() => menuChange(menu1.name, menu1.id)}>{menu1.name}</Menu.Item>
                        }
                    })
                }
            </Menu>)}
            <div className="u-flex" style={{height:30}}>
                <Input placeholder="[99]自助客户" value={inputdata} onChange={e => setKeyword(e.target.value)} style={{ width: 100, height:30, fontSize: 10 }} />
                <Button type="primary" onClick={check} style={{ fontSize: 10, flex: 1, height:30, color: 'black', backgroundColor: '#fff' }}>
                    查
                </Button>
                <Button type="primary" onClick={() => butChange(show)} style={{ fontSize: 10, width: 70, height:30, color: 'black',overflow: 'hidden' , backgroundColor: '#fff' }}>
                    {show ? '看部门' : '看前缀（职务）'}
                </Button>
            </div>
        </div>
    )

    // 获取菜单栏选项
    function menuGet() {
        http('store.list', {
            inputdata
        }).then(res => {
            if (res.code === 1) {
                let data = [
                    {
                        id: 1,
                        name: "所有部门",
                        child: res.data.rows
                    }
                ]
                setMenu(data)
            }
        }).catch(err=>console.log(err))
    }

    // 获取职务信息
    function authGet() {
        http('auth.list', {
            inputdata
        }).then(res => {
            if (res.code === 1) {
                let data = [
                    {
                        id: 1,
                        name: "所有职务",
                        child: res.data.rows
                    }
                ]
                setAuthSource(data)
                setShow(true)
            }
        }).catch(err=>console.log(err))
    }

    // 按钮切换菜单列表
    function butChange(show) {
        if (show) {
            setShow(!1)
        } else {
            setShow(!0)
        }
        props.butChange(show)

    }

    // 查
    function check() {
        // authGet()
        // menuGet()
        const i = menu[0].child.filter(i => i.name === inputdata)
        props.menuChange(i[0]?.id ?? '')
    }


    function setKeyword(value) {
        setInputdata(value)
    }

    function menuChange(name, id) {
        setInputdata(name) //菜单底部input的值
        props.menuChange(id)
    }

}

export default MenuList